﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js实现下载次数倒数特效</title>
	<style type="text/css">
        body, div, span, p, var, em, strong, a, h1, h2, h3, h4, h5, h6, input, textarea, ul, li, img
        {
            margin: 0;
            padding: 0;
            font-family: Arial;
        }
        .clear
        {
            clear: both;
            overflow: hidden;
            height: 0;
        }
        img
        {
            border: none;
        }
        a
        {
            text-decoration: none;
            color: #08C;
        }
        ul, ol
        {
            list-style-type: none;
        }
        .content
        {
            margin: 50px auto;
            width: 600px;
            position: relative;
        }
        h1
        {
            margin: 0 auto 10px;
        }
        h1 img
        {
            margin: 0 auto;
        }
        #downloadCounter
        {
            position: relative;
            width: 525px;
            height: 80px;
            margin: 22px auto 5px;
            overflow: hidden;
        }
        .digitGroupSeparator
        {
            position: relative;
            float: left;
            width: 9px;
            height: 64px;
            background: url("img/counter_comma.png") no-repeat 50% 100%;
            text-indent: -999em;
        }
        .digit
        {
            float: left;
            position: relative;
            width: 41px;
            height: 80px;
            overflow: hidden;
            background: url("img/counter_filmstrip_bg.png") no-repeat;
        }       
        .digitImage
        {
            position: absolute;
            width: 41px;
            height: 9600px;
        }
        .digitImageElement
        {
            width: 41px;
            height: 4800px;
            background: url("img/counter_filmstrip.png") no-repeat 0 0;
        }
        .sub
        {
            line-height: 25px;
            font-size: 16px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="content">
        <div id="downloadCounter">
            <span class="digit">
                <div class="digitImage" style="left: 0px; top: 0px;">
                    <div class="digitImageElement">
                    </div>
                    <div class="digitImageElement">
                    </div>
                </div>
            </span><span class="digit">
                <div class="digitImage" style="left: 0px; top: 0px;">
                    <div class="digitImageElement">
                    </div>
                    <div class="digitImageElement">
                    </div>
                </div>
            </span><span class="digitGroupSeparator">,</span><span class="digit">
                <div class="digitImage" style="left: 0px; top: 0px;">
                    <div class="digitImageElement">
                    </div>
                    <div class="digitImageElement">
                    </div>
                </div>
            </span><span class="digit">
                <div class="digitImage" style="left: 0px; top: 0px;">
                    <div class="digitImageElement">
                    </div>
                    <div class="digitImageElement">
                    </div>
                </div>
            </span><span class="digit">
                <div class="digitImage" style="left: 0px; top: 0px;">
                    <div class="digitImageElement">
                    </div>
                    <div class="digitImageElement">
                    </div>
                </div>
            </span><span class="digitGroupSeparator">,</span><span class="digit">
                <div class="digitImage" style="left: 0px; top: 0px;">
                    <div class="digitImageElement">
                    </div>
                    <div class="digitImageElement">
                    </div>
                </div>
            </span><span class="digit">
                <div class="digitImage" style="left: 0px; top: 0px;">
                    <div class="digitImageElement">
                    </div>
                    <div class="digitImageElement">
                    </div>
                </div>
            </span><span class="digit">               
                <div class="digitImage" style="left: 0px; top: 0px;">
                    <div class="digitImageElement">
                    </div>
                    <div class="digitImageElement">
                    </div>
                </div>
            </span><span class="digitGroupSeparator">,</span> <span class="digit">               
                <div class="digitImage" style="left: 0px; top: 0px;">
                    <div class="digitImageElement">
                    </div>
                    <div class="digitImageElement">
                    </div>
                </div>
            </span><span class="digit">                
                <div class="digitImage" style="left: 0px; top: 0px;">
                    <div class="digitImageElement">
                    </div>
                    <div class="digitImageElement">
                    </div>
                </div>
            </span></span><span class="digit">               
                <div class="digitImage" style="left: 0px; top: 0px;">
                    <div class="digitImageElement">
                    </div>
                    <div class="digitImageElement">
                    </div>
                </div>
            </span>
        </div>
        <div style=" margin:0 auto;width: 600px; height: 40px; display: block;">
            </div>
      
    </div>
</body>
<script type="text/javascript">
    function getTarget(oArg) {
        this.aElements = [];

        if (typeof oArg == 'string') {
            switch (oArg.substring(0, 1)) {
                case '.':
                    this.aElements = this.__getElementsByClassName(oArg.substring(1));
                    break;
                case '#':
                    this.aElements = document.getElementById(oArg.substring(1));
                    break;
                default:
                    this.aElements = document.getElementsByTagName(oArg);
                    break;
            }
            return this.aElements;
        } else if (typeof oArg == 'object') {
            return oArg;
        }

    }
    getTarget.prototype.__getElementsByClassName = function (sClassName) {
        var tagName = document.getElementsByTagName("*"), arr = [];
        for (var i = 0, n = tagName.length; i < n; i++) {
            for (var j = 0, k = tagName[i].className.split(" "); j < k.length; j++) {
                if (k[j] == sClassName) {
                    arr.push(tagName[i]);
                    break;
                }
            }
        }
        return arr;
    }
    function $(oArg) {
        return new getTarget(oArg);
    }
    var t = []; //计时器对象
    var iTimer = []; //时间
    var iSpeed = -80;  //速度值
    function startMove(iTarget, Index) { //参数:(目标值  下标)
        if (t[Index]) {
            clearInterval(t[Index]);
            t[Index] = null;
        }
        t[Index] = setInterval(function () {
            doMove(iTarget, Index)
        }, iTimer[Index]);

    }
    var oDIgit = $(".digitImage");
    function doMove(iTarget, Index) {
        var oDigitImage = oDIgit[Index];
        if (oDigitImage.offsetTop < -4800) { //防止超出
            oDigitImage.style.top = 0 + "px";
        }
        if (Math.abs(oDigitImage.offsetTop) / 480 == iTarget) {//显示数字图片
            clearInterval(t[Index]);
            t[Index] = null
        }
        else {
            oDigitImage.style.top = oDigitImage.offsetTop + iSpeed + "px";
        }
    }
    var i = 24536293000; //设置数字
    var s = "";
    window.onload = function () {
        var iTunes = setInterval(function () {
            i = i + Math.ceil(Math.random() * 100);
            if (i >= 25E9) {//防止溢出
                i = 25E9;
                clearInterval(iTunes);
                iTunes = null;
            }
            s = i.toString();
            startMove(s.substring(0, 1), 0);
            startMove(s.substring(1, 2), 1);
            startMove(s.substring(2, 3), 2);
            startMove(s.substring(3, 4), 3);
            startMove(s.substring(4, 5), 4);
            startMove(s.substring(5, 6), 5);
            startMove(s.substring(6, 7), 6);
            startMove(s.substring(7, 8), 7);
            startMove(s.substring(8, 9), 8);
            startMove(s.substring(9, 10), 9);
            startMove(s.substring(10, 11), 10);
            iTimer = [80, 80, 80, 80, 80, 80, 40, 40, 20, 20, 20]; // 控制速度（个个数字的运动速度不一致）
        }, 100);
    }
</script>
</html>
